/* 头部 */
* {
    margin: 0px;
    padding: 0px;
	list-style: none;
	text-decoration: none;
}

.header {
    display: flex;
    align-items: center;
    height: 78px;
    background-color: rgb(64, 136, 231);
    padding: 0 10px;
    height: 107px;
    position: fixed;
    top: 0;
    width: 1500px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content {
    margin-top: 78px;
}

.logo img {
    width: 100%;
    max-width: 198px;
    height: auto;
    margin-right: 30px;
}

.nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav ul li {
    margin: 0 15px;
    position: relative; /* 相对于此元素定位下拉列表 */
}

/* 统一导航项大小 */
.nav ul li a {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 42px;
    width: 120px; /* 统一宽度 */
    padding: 0 20px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

.nav ul li a:hover {
    background-color: rgba(7, 60, 85, 0.2);
}

.search {
    display: flex;
    align-items: center;
    margin-left: 50px;
    background-color: skyblue;
    padding: 0 15px;
    border-radius: 5px;
}

.search input {
    flex: 1;
    height: 30px;
    border: 1px solid rgb(61, 166, 232);
    border-right: 0;
    color: rgb(90, 95, 95);
    font-size: 14px;
    padding-left: 10px;
}

.search button {
    height: 33px;
    padding: 0 15px;
    background-color: rgb(64, 136, 231);
    color: white;
    border: none;
    border-radius: 0 5px 5px 0;
}

/* 导航下拉 */
.dropdown {
    display: none;
    position: absolute;
    background-color: rgb(64, 136, 231);
    box-shadow: 0px 8px 16px 0px rgba(6, 122, 231, 0.2);
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 18px;
    text-align: center;
    overflow: hidden;
    left: 0;
    top: 100%;
    opacity: 0.9;
    width: 100%; /* 下拉菜单宽度与上方标签保持一致 */
}

.nav ul li:hover .dropdown {
    display: block; /* 显示下拉菜单 */
}

.dropdown ul {
    display: block; /* 垂直排列 */
    padding: 0;
    margin: 0;
}

.dropdown ul li {
    margin: 0;
}

/* 统一下拉菜单项大小 */
.dropdown ul li a {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 42px;
    width: 120px; /* 统一宽度 */
    padding: 0 20px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    white-space: nowrap; /* 防止文字换行 */
}

.dropdown ul li a:hover {
    background-color: #063d6a;
}

body {
    padding-top: 107px;
}

.main-banner img {
    width: 1500px;
    height: 300px;
    display: block;
}

.main-content {
    background-color: rgb(255, 255, 255);
    width: 1500px;
}

.out {
    position: relative;

    text-align: center;
    /* border: 1px red solid; */
    background-image: url('../img/logo/bg4.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 310px;
    margin-top: 0px;
    overflow: hidden;
}

.out>ul {
    position: relative;
    /* border: 1px red solid; */
    margin: 0px auto;
    margin-top: 10px;
    width: 960px;
    height: 100px;
    transform: scale(0.6);
}

.out>ul>li {
    position: absolute;
    opacity: 0;
    transition: all, 1s;
    margin-top: 0px;
}

.out>ul>li:hover {
    cursor: pointer;
}

.out>ul>li>img {
    position: relative;
    width: 800px;
    height: 300px;
}

.out>.anNiu {
    position: absolute;
    border: 1px solid;
    color: #EBB666;
    top: 280px;
    width: 45px;
    line-height: 90px;
}

.out>.anNiu:hover {
    cursor: pointer;
}

#anNiu1 {
    left: 200px;
    top: auto;
}

#anNiu2 {
    right: 200px;
    top: auto;
}

.out>ol {
    position: relative;
    top: 188px;
    left: 44%;
    clear: both;
}

.out>ol>li {
    background-color: ghostwhite;
    width: 10px;
    height: 10px;
    float: left;
    margin-left: 10px;
    border-radius: 50%;
}

.out>ol::after {
    content: "";
    display: block;
    clear: both;
}

.main-container {
    position: relative;
    width: 100%;
    background-image: url('../img/logo/bg5.jpg');
    background-size: cover;
    background-position: center;

    display: flex;
}

/* 内容背景图 */
.main-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(255, 255, 255);
    /* 白色背景，50%透明度 */
    z-index: -1;
}

.main-l {
    width: 20%;
    display: flex;

    position: relative;
    /* 设置 Flexbox 方向为垂直 */
    flex-direction: column;
    margin-left: 50px;
}



/* 左侧方框样式 */
.main-left {
    width: 100%;
    height: 350px;
    /* 根据需要调整高度 */

    margin-top: 50px;
    border: #87c9ff solid 4px;

    display: flex;
    /* 使用Flexbox布局，使导航栏垂直排列 */
    flex-direction: column;
    /* 设置Flexbox的子元素为垂直排列 */
    align-items: center;
    /* 可选，使导航栏在水平方向上居中 */
    justify-content: space-around;
    /* 可选，均匀分配导航栏之间的空间 */
    border-radius: 10px;
    position: relative;

}

/* 左侧导航栏样式 */
.nav-bar {
    width: 80%;
    /* 根据需要调整宽度 */
    height: 50px;
    /* 设置导航栏的高度 */
    background-color: #40B9FF;
    /* 设置背景颜色 */
    border: #ccc solid 1px;
    /* 设置边框 */
    display: flex;
    /* 使用Flexbox布局，使内容在导航栏内居中 */
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    /* 设置导航栏之间的垂直间距 */
    border-radius: 20px;

}

.nav-bar:hover {
    width: 85%;
    height: 60px;
    background-color: #3597e7;
    cursor: pointer;
}

/* 左侧导航文本 */
.nav-bar a {
    display: flex;
    /* 使用Flexbox布局 */
    align-items: center;
    /* 使子元素在垂直方向上居中对齐 */
}

.notice {
    width: 100%;
    position: relative;
    align-items: center;

}

.notice-title {
    display: flex;
}

.notice img {
    margin-left: 50px;
    margin-top: 20px;
}

.notice h3 {
    margin-left: 20px;
    margin-top: 20px;
}

.notice ul {
    margin-left: 10px;

}

.notice ul li {
    margin-bottom: 5px;

}

.m-L-logo {
    width: 30px;
    /* 设置图标的宽度 */
    height: 30px;
    /* 设置图标的高度 */
    margin-right: 10px;
    /* 在图标和文本之间添加一些间距 */
}




/* 右侧方框样式 */
.main-right {
    margin-left: 50px;
    margin-top: 50px;
    width: 70%;

    border: #bce4f8 solid 2px;
    border-radius: 10px;

}

/* 右侧导航栏 */
.main-r-nav {

    font-size: 14px;
    /* 调整字体大小 */
    color: #333;
    /* 调整字体颜色 */
    text-align: center;
    /* 居中显示导航栏文字 */

    /* 添加背景色 */
    margin-left: 50px;
}



/* 导航栏对应内容边框 */
.content-section {
    display: none;
    /* 默认隐藏所有内容区域 */
    margin-top: 10px;
    padding: 10px;

}

/* 右侧默认显示 */
.content-section.active {
    display: block;
    /* 仅显示具有active类的内容区域 */
}

.list {
    width: 100%;

    border: #87c9ff solid 1px;
    margin-bottom: 20px;
    /* 增加列表之间的间距 */
    display: flex;

}

.list-L {
    width: 80px;

    background-color: #87c9ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    /* 使.list-L内的所有文本水平居中对齐 */
}

.list-L p {
    flex: 1;
    /* 使每个<p>标签占据可用空间 */
    margin: 5px 0;

    padding: 10px;
    font-size: 18px;
}




/* 大标题字体样式 */
.example {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    padding-left: 10px;
    background-color: #d60000;
}

.list-r {
    flex: 1;
    /* 使.list-r占据剩余空间 */
    margin-left: 10px;
    /* 可选：为.list-r和.list-L之间添加一些间距 */
}

.list-r ul li {
    list-style: none;
    /* 移除默认的列表样式 */

    padding-left: 20px;

    margin: 10px 0;
    /* 增加列表项之间的间距 */
    background-color: #f2f2f2;
    border-radius: 5px;
}

.list-r ul li:hover {

    background-color: #ccf3f8;
    cursor: pointer;
}

.list-r ul li a {
    color: #323131;
    /* 调整链接颜色 */
    text-decoration: none;
    /* 移除链接下划线 */

}

.list-r ul li a:hover {
    padding-left: 10px;
    color: rgb(102, 165, 241);

}

/* 方块样式 */
.cube {

    width: 250px;

    background-color: #97d9ff;
    display: inline-block;
    margin-left: 40px;
    margin-top: 20px;

    border-radius: 10% 10% 3% 3%;
}

.cube:hover {
    background-color: #71bdfb;
    cursor: pointer;
}

/* 方块背景图 */
.cube .bg1 {
    width: 250px;
    height: 170px;
    background-image: url("../img/bg/cube-bg.png");
    background-size: cover;
    opacity: 0.8;
    border-radius: 10% 10% 0% 0%;
}

.cube .bg2 {
    width: 250px;
    height: 170px;
    background-image: url("../img/bg/cube-bg2.png");
    background-size: cover;
    opacity: 0.8;
    border-radius: 10% 10% 0% 0%;

}

.cube .bg3 {
    width: 250px;
    height: 170px;
    background-image: url("../img/bg/cube-bg3.png");
    background-size: cover;
    opacity: 0.8;
    border-radius: 10% 10% 0% 0%;

}

.cube .bg4 {
    width: 250px;
    height: 170px;
    background-image: url("../img/bg/cube-bg4.png");
    background-size: cover;
    opacity: 0.8;
    border-radius: 10% 10% 0% 0%;

}

.cube .bg5 {
    width: 250px;
    height: 170px;
    background-image: url("../img/bg/cube-bg5.png");
    background-size: cover;
    opacity: 0.8;
    border-radius: 10% 10% 0% 0%;

}

.cube .bg6 {
    width: 250px;
    height: 170px;
    background-image: url("../img/bg/cube-bg7.png");
    background-size: cover;
    opacity: 0.8;
    border-radius: 10% 10% 0% 0%;

}

/* 方块图片上的文字 */

.cube p {
    padding-top: 50px;
    padding-left: 20px;
    color: rgb(255, 62, 8);
    font-size: 30px;
    display: inline-block;
    font-weight: bold;
}

/* 方块下方简介 */
.cube span {
    height: 30px;
    padding-bottom: 10px;
    text-align: center;
    color: rgb(55, 55, 55);

}

.cube span:hover {
    color: rgb(2, 103, 255);
}


/* 概况展示部分 */
.title {
    color: rgb(0, 170, 255);
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: #8b8f92 2px 2px 2px;

}

/* 主内容轮播图 */
.carousel {
    position: relative;
    width: 100%;
    /* 使轮播图宽度自适应容器 */
    max-width: 600px;
    /* 设置最大宽度 */
    height: 350px;
    /* 稍微增加高度 */
    overflow: hidden;

    /* 简化边框样式 */
    margin: auto;
    /* 水平居中 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    /* 添加阴影效果，增加立体感 */
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* 平滑过渡效果 */
}

.carousel-item {
    min-width: 100%;
    /* 确保每个项目占据整个容器宽度 */
    box-sizing: border-box;
    /* 包括内边距和边框在元素总宽度和高度内 */
}



.carousel-item img {
    width: 100%;
    /* 图片宽度占满容器 */
    height: 70%;
    /* 使图片高度也占满容器 */
    object-fit: fill;
    /* 保持图片宽高比，同时裁剪以适应容器 */
    cursor: pointer;

}

.carousel-indicators {
    position: relative;
    width: 100%;

    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    /* 使指示器居中对齐 */
}

.indicator {
    width: 10px;
    height: 10px;
    background-color: #2f86ff;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.indicator.active {
    background-color: #ace9fc;
}

/* 模态框样式 */
.modal {
    display: none;
    /* 默认隐藏模态框 */
    position: fixed;
    /* 固定定位 */
    z-index: 1000;
    /* 确保模态框位于其他元素之上 */
    padding-top: 60px;
    /* 模态框顶部内边距 */
    left: 0;
    top: 0;
    width: 100%;
    /* 模态框宽度占满屏幕 */
    height: 100%;
    /* 模态框高度占满屏幕 */
    overflow: auto;
    /* 允许模态框内容滚动 */

    background-color: rgba(0, 0, 0, 0.5);
    /* 背景颜色带透明度 */
}

.modal-content {
    margin: auto auto;
    display: block;
    max-width: 80%;
    /* 稍微减小最大宽度 */
    max-height: 90%;
    /* 设置最大高度，防止图片过大 */
    object-fit: contain;
    /* 保持图片宽高比，适应模态框 */
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

/* 各类展厅 */
.show-box {
    position: relative;
    width: 250px;
    height: 200px;
    display: inline-block;
    border-radius: 8px;
    margin-left: 70px;
    overflow: hidden;
    margin-top: 20px;
}

.show-box img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: block;
}

.show-box h4 {
    position: absolute;
    top: 90%;
    /* 从顶部开始定位，50%是图片高度的中点 */
    left: 50%;
    /* 从左侧开始定位，50%是图片宽度的中点 */
    transform: translate(-50%, -50%);
    /* 调整位置，使文字居中 */
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgba(68, 68, 68, 0.6);
    /* 使用rgba来设置透明度 */
    width: 100%;
    /* 文字容器宽度设为100%，使其覆盖整个图片宽度 */
    padding: 10px 0;
    /* 上下内边距，可根据需要调整 */
    margin: 0;
    /* 移除默认的外边距 */
    z-index: 1;
    /* 确保文字位于图片之上 */
}


/* 特色展示部分 */
.befor {
    position: relative;
    display: inline-flex;
    /* 或其他适当的display值 */
    width: 800px;
    /* 根据需要设置宽度 */
    height: 400px;
    /* 根据需要设置高度 */
    margin: 20px 20px 20px 100px;
    border: #063d6a 1px solid;
    border-radius: 5px;
}

.befor img {
    width: 100%;


}

.befor h4 {
    margin-top: 150px;
    width: 100%;
    height: 50px;
    font-size: 30px;
    font-family: 'SimSun', '宋体', serif;
    position: absolute;

    color: rgba(86, 193, 255, 0.9);
    /* 根据需要设置文字颜色 */
    background-color: rgba(0, 0, 0, 0.5);
    /* 可选：设置背景色以增加可读性 */

    border-radius: 5px;
    /* 可选：设置圆角 */
    text-align: center;
}

.befor p {
    margin-top: 200px;
    width: 100%;
    font-size: 18px;
    font-family: 'SimSun', '宋体', serif;
    position: absolute;

    color: rgba(255, 255, 255, 0.8);
    /* 根据需要设置文字颜色 */
    background-color: rgba(0, 0, 0, 0.5);
    /* 可选：设置背景色以增加可读性 */
    border-radius: 5px;
    /* 可选：设置圆角 */
    text-align: left;
    text-indent: 2em;
}

.befor p a {
    border: #ffffff 1px solid;
    color: #40B9FF;
}

.befor p a:hover {
    color: #ffffff;
}

.footer {
    width: 100%;
    margin-bottom: 0px;

    background-color: rgb(180, 215, 226);
    text-align: center;
    margin-top: auto;
}